<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本选择器</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style type="text/css">
        #box {background-color:#FFF; border:2px solid red; padding:5px;}
        dl{
            display: inline-block;
            width: 300px; 
            margin-left: 0;
            vertical-align: bottom;
        }
    </style>
</head>
<body> 
    <div id="box"> &lt;div id="box"&gt;
        <h2 class="title">&lt;h2 class="title"&gt;&lt;/h2&gt;</h2>
        <h3 class="title">&lt;h3 class="title"&gt;&lt;/h3&gt;</h3>
        <h3>QQ热门游戏</h3>
        <div>
            <img src="images/dbddz.jpg" width="93" height="99" alt="夺宝斗地主" />
            <dl>
                <dt>&nbsp;&nbsp;  夺宝斗地主</dt>
                <dd class="title">休闲游戏</dd>
                <dd>夺宝斗地主继承了斗地主免费积分的玩法，纯免费，不限制豆无限......</dd>
            </dl>
        </div>
        <div>
            <img src="images/ybgc.jpg" width="93" height="99" alt="妖不怪城" />
            <dl>
                <dt>&nbsp;&nbsp;妖不怪城</dt>
                <dd class="title">休闲游戏</dd>
                <dd>一款非常适合年轻人的网游，无论是一砖一瓦的家园搭建，还是......</dd>
            </dl>
        </div>
    </div>

    <script>
        // 所有的h3---#ccc
        $(document).ready(function(){
            $("h3").css("background-color","#ccc");
            // class=title #555
            $(".title").css("background-color","#555");
            // id=box  #666
            $("#box").css("background-color","#666");///只针对容器，不针对子元素
            // h2 \dt \class =title  #777   =并
            $("h2,dt,.title").css("background-color","red");
            // class=title中的h2标签设置背景颜色#aaa     交集
            $("h2.title").css("background-color","#fff");
            // 所有的元素
            $("*").css("color","#fff");

        })

    </script>
        
</body>
</html>